<template>
	<view>
		<Header :title="'礼品卡详情'"></Header>
		<view class="cardList">
			<view class="cardItem">
				<image class="cardBg" :src="item.front" mode="aspectFill"></image>
				<image class="logo" src="@/static/logo.png" mode="widthFix"></image>
				<view class="cardPrice">{{item.money}}元</view>
				<view class="cardName">{{item.name}}</view>
				<view class="cardTime">到期时间：{{item.expirationTime}}</view>
			</view>
		</view>
		<view class="titleList">
			<view class="titleItem">
				<view class="title">卡片详情</view>
				<view class="content">
					{{item.name}}
				</view>
			</view>
			<view class="titleItem">
				<view class="title">使用时间</view>
				<view class="content">
					{{item.createTime}}至{{item.expirationTime}}
				</view>
			</view>
			<view class="titleItem">
				<view class="title">使用规则</view>
				<view class="content">
					<rich-text :nodes="item.recommend"></rich-text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				item:{}
			}
		},
		onShow() {

		},
		components: {
			Header
		},
		onLoad(e){
			 if (e.item) {
			     this.item=JSON.parse(decodeURIComponent(e.item))
			}
			
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
	.cardList {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0;

		.cardItem {
			width: 679rpx;
			height: 384rpx;

			border-radius: 21rpx;
			position: relative;

			.cardBg {
				position: absolute;
				width: 679rpx;
				height: 384rpx;
				border-radius: 20rpx;
			}
			.cardTime{
				position: absolute;
				right: 25rpx;
				bottom: 30rpx;
				font-size: 24rpx;
				color:#fff;
			}

			.logo {
				position: absolute;
				width: 74rpx;
				height: 88rpx;
				top: 8rpx;
				left: 36rpx;
				box-shadow: 0rpx 10rpx 17rpx 0rpx rgba(122, 122, 122, 0.08);
			}

			.cardPrice {
				position: absolute;
				top: 160rpx;
				left: 114rpx;
				font-size: 70rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				-webkit-text-stroke: 1px #D42A1B;
				text-stroke: 1px #D42A1B;
			}

			.cardName {
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
				width: 177rpx;
				height: 57rpx;
				background: rgba(255, 255, 255, 0.87);
				border-radius: 24rpx;
				text-align: center;
				line-height: 57rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #D42A1B;

			}
		}
	}

	.titleList {
		width: 100%;
		padding: 8rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.titleItem {
			display: flex;
			flex-direction: column;
			margin-bottom: 44rpx;

			.title {
				font-size: 35rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #303030;
				line-height: 33rpx;
				display: flex;
				margin-bottom: 21rpx;

				&::before {
					display: block;
					width: 5rpx;
					height: 34rpx;
					background: #D42A1B;
					margin-right: 6rpx;
					border-radius: 2rpx;
					content: '';

				}
			}

			.content {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #828282;
				line-height: 29rpx;
			}
		}
	}

	
</style>
